<!-- 个人中心：支持装修 -->
<template>
  <s-layout
    title="我的"
    tabbar="/pages/index/user"
    navbar="custom"
    :bgStyle="template.page"
    :navbarStyle="template.navigationBar"
    onShareAppMessage
  >


<!--                    <s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">-->
<!--                      <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />-->
<!--                    </s-block>-->

    <view class="container">
      <view class="userInfo">
        <bBox gap="30rpx">
          <template #left>
            <up-avatar :src="userInfo.avatar || setting.avatarDefault" size="120rpx"/>
          </template>
          <template #rightTop>
            <view class="flex top">
              <text class="userName">{{ userInfo.nickname }}</text>
              <view v-if="!userInfo.mobile" class="mobile" @click="showAuthModal('changeMobile')">绑定手机号</view>
            </view>
          </template>
          <template #rightBottom>
            <view class="bot">
              <view>尊享八大权益</view>
            </view>
          </template>
        </bBox>
      </view>
      <view class="member uno-bg-white uno-border-rd-lg uno-pl1 uno-pr1 uno-pt-5 uno-pb-5 uno-flex">
        <bBox @click="sheep.$router.go('/pages/index/exchange')">
          <template #rightTop>
            <view class="uno-font-size-10 uno-color-red uno-font-bold" style="font-size: 40rpx;">{{userInfo.point}}</view>
          </template>
          <template #rightBottom>
            <view class="uno-font-size-3">我的会员分></view>
          </template>
        </bBox>
        <bBox @click="sheep.$router.go('/pages/index/exchange')">
          <template #left>
            <up-avatar :src="'https://www.zhangfkj.cn/zfkj/14_6c4dab08-74e1-42d4-9431-29eb8ab0ad1ckefuicon.png'" size="80rpx"/>
          </template>
          <template #rightTop>
            <view class="first uno-color-white uno-bg-red uno-border-rd uno-pr1 uno-pl1">在线咨询</view>
          </template>
          <template #rightBottom>
            <view class="first uno-font-bold">专属客服</view>
          </template>
        </bBox>
        <bBox @click="sheep.$router.go('/pages/order/list')">
          <template #left>
            <up-avatar :src="'https://www.zhangfkj.cn/zfkj/14_42fa6fed-d212-4539-83a6-d465b4c54a3fordericon.png'" size="80rpx"/>
          </template>
          <template #rightTop>
            <view class="first uno-color-white uno-bg-blue uno-border-rd uno-pr1 uno-pl1">订单查询</view>
          </template>
          <template #rightBottom>
            <view class="first uno-font-bold">我的兑换</view>
          </template>
        </bBox>
      </view>
      <view class="sign uno-bg-white uno-border-rd-lg uno-mt2 uno-mb2 ">
        <sign/>
      </view>
      <view class="banner">
        <up-swiper
          :list="list3"
          indicator
          indicatorMode="line"
          circular
          class="banner-swiper"
          radius="20rpx"
          height="200rpx"
        />
      </view>
      <view class="gridBox uno-bg-white uno-mt4 uno-border-rd-lg uno-p4">
<!--        <s-block-item :type="menuGrid.id" :data="menuGrid.property" :styles="menuGrid.property.style" />-->
        <up-grid
          :border="false"
          @click="click"
          col="4"
          gap="50rpx"
        >
          <up-grid-item
            v-for="(baseListItem,baseListIndex) in baseList"
            :key="baseListIndex"
          >
            <up-avatar   :src="baseListItem.img" shape="circle" size="80rpx"/>
            <text class="uno-mt2">{{baseListItem.title}}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
    <view class="likeing uno-color-red uno-flex uno-flex-justify-center uno-items-center uno-mt-10">
      <view class="line line-left uno-w-150 uno-h-2  "/>
      <view class="like uno-font-size-5">猜你喜欢</view>
      <view class="line line-right uno-w-150 uno-h-2  "/>
    </view>
    <view class="bot-container uno-p2">
      <scrollList @load-more="loadMore" :data="data">
        <template #default="{item}">
          <HotItem :model-value="item" @click="sheep.$router.go('/pages/goods/index',{ id :item.id})"/>
        </template>
      </scrollList>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed, onMounted, ref } from 'vue';
  import { onLoad, onShow, onPageScroll, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import HotItem from '@/sheep/businessCom/hot-item.vue';
  import scrollList from '@/sheep/businessCom/scrollList.vue';
  import { useScrollData } from '@/sheep/hooks/useSrcollData';
  import SpuApi from '@/sheep/api/product/spu';
  import bBox from '@/sheep/businessCom/b-box.vue';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import sign from '@/sheep/businessCom/sign.vue';
  import { showAuthModal } from '@/sheep/hooks/useModal';

  onLoad(() => {
    // 隐藏原生tabBar
    uni.hideTabBar();
    loadMore();
  });

  // 轮播图
  const list3 = ref([
    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  ]);
  const baseList = [
    {
      img:'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      title: '联系客服',
      path:'/pages/goods/index',
    }, {
      img:'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      title: '关于我们',
      path:'/pages/goods/index',
    }, {
      img:'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      title: '平台投诉',
      path:'/pages/goods/index',
    }, {
      img:'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      title: '隐私协议',
      path:'/pages/goods/index',
    }, {
      img:'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      title: '服务协议',
      path:'/pages/goods/index',
    }, {
      img:'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      title: '商务合作',
      path:'/pages/goods/index',
    }, {
      img:'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      title: 'App下载',
      path:'/pages/goods/index',
    },
  ]

  const template = computed(() => sheep.$store('app').template.user);

  const menuGrid = computed(() => template.value.components.find(item => item.id === 'MenuGrid'));
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const setting = computed(() => sheep.$store('category').pages.user);
  onShow(() => {
    sheep.$store('user').updateUserData();
  });

  onPullDownRefresh(() => {
    sheep.$store('user').updateUserData();
    setTimeout(function() {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {
  });

  const { data, loadMore } = useScrollData({
    getApi: SpuApi.getSpuPage,
  });

  onReachBottom(() => {
    console.log('到底了');
    uni.$emit('onReachBottom');
    loadMore();
  });
</script>

<style lang="scss" scoped>
  $dark-red-more: #ff1c24;
  .container {
    padding: 0 20rpx;

    :deep(.userInfo) {
      display: flex;
      padding: 80rpx 0 20rpx;

      .b-box {
        &__right {
          margin-left: 40rpx;
          padding-top: 20rpx;
        }

        .userName {
          font-size: 40rpx;
          font-weight: 700;
        }

        .mobile {
          background: #d5a061;
          border-radius: 12rpx;
          box-shadow: 0 .02667rem .05333rem 0 #d09a5b;
          color: #fff;
          font-size: 26rpx;
          font-weight: 400;
          padding: 5rpx 5rpx;
          margin-left: 10rpx;
        }
      }

    }

  }

  .likeing {
    color: $dark-red-more;

    .like {
      font-size: 40rpx;
      font-weight: bold;
      margin: 0 50rpx;
    }

    .line {
      position: relative;
      background-color: $dark-red-more;

      &::after {
        content: '';
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background-color: $dark-red-more;

      }

      &-left::after {
        left: 100%;
        top: 0;
        transform: translateY(-50%) translateX(-50%);
      }

      &-right::after {
        right: 100%;
        top: 0;
        transform: translateY(-50%);;
      }
    }

  }
</style>
